<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- CSS -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <!-- jQuery and JavaScript Bundle with Popper -->
    <!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <!--
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    -->
</head>
<body>

    <table id="userlist" class="display" style="width: 100%">
        <thead>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for row in user_list %}
                <tr>
                    <td>{{ row.id }}</td>
                    <td>{{ row.username }}</td>
                    <td>{{ row.email }}</td>
                    <td>{{ row.mobile }}</td>
                    <td>
                        <button onclick="userEdit(this)">编辑</button>
                        <button onclick="userPermission(this)">授权</button>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>



    <!-- 用户编辑页面 -->
    <div class="modal fade" id="user_modal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">用户编辑</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
              <form id="userEditForm">
                  <div class="form-group col-md-9" style="display: none">
                      <div id="id"></div>
                  </div>

                  <div class="form-group col-md-9">
                      用户名: <input name="username" class="form-control" id="username">
                  </div>

                  <div class="form-group col-md-9">
                      邮箱: <input name="email" class="form-control" id="email">
                  </div>

                  <div class="form-group col-md-9">
                      电话: <input name="mobile" class="form-control" id="mobile">
                  </div>
              </form>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Understood</button>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
        function userEdit(t) {
            $.ajax({
                url: '/users/edit',
                dataType: 'json',
                type: 'POST',
                data: $('#userEditForm').serialize(),
                success: function(res) {
                    if (res.code === '0') {
                        var id = $(t).parents('tr').children('td').eq(0).text()
                        var username = $(t).parents('tr').children('td').eq(1).text()
                        var email = $(t).parents('tr').children('td').eq(2).text()
                        var mobile = $(t).parents('tr').children('td').eq(3).text()
                        $('#id').val(id)
                        $('#username').val(username)
                        $('#email').val(email)
                        $('#mobile').val(mobile)
                        $('#user_modal').modal('show')
                    } else {
                        alert(res.message)
                    }
                }
            })
        }

        function userPermission(t) {

        }

        $(function () {
            $('#userlist').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": false,
                "info": true,
                "autoWidth": true,
                "language": {
                    "lengthMenu": "选择每页 _MENU_ 展示 ",
                    "zeroRecords": "未找到匹配结果--抱歉",
                    "info": "当前显示第 _PAGE_ 页结果，共 _PAGES_ 页",
                    "infoEmpty": "没有数据",
                    "infoFiltered": "(获取 _MAX_ 项结果)",
                    "paginate": {
                        "first": "首页",
                        "previous": "上一页",
                        "next": "下一页",
                        "last": "末页"
                    }
                },
            });
        })
    </script>
</body>
</html>